<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<title>信息录入</title>
		<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
		<script src="__JS__/node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="__JS__/node_modules/axios/dist/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="__JS__/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__JS__/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="visitor" style="background-color: #F7F8F9;min-height: 100vh;">
			<div class="tabbar-top">
				<div class="item" :class="tab_id == 1 ?'item-active':''" @click="changeTab(1)">
					电子行程
				</div>
				<div class="item" :class="tab_id == 2 ?'item-active':''" @click="changeTab(2)">
					游客信息录入
				</div>
				<div class="item" :class="tab_id == 3 ?'item-active':''" @click="changeTab(3)">
					人数统计
				</div>
			</div>
			<template v-if="tab_id == 2">
				<div class="page-title">
					游客信息录入
				</div>
				<div class="form">
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								家庭编号：
							</div>
							<input type="text" v-model="family_id" style="margin-left: 0.625rem;width: 50%;" class="form-input-v" placeholder="请输入家庭编号" />
							
						</div>
						<div class="delete-id-family">
							删除
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								姓名：
							</div>
							<input type="text" style="margin-left: 0.625rem;"v-model="user_name" class="form-input-v" placeholder="请输入姓名" />
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								出生日期：
							</div>
							<input class="birthday-input" type="text" v-model="year" placeholder="年"/>-
							<input class="birthday-input" type="text" v-model="mouth" placeholder="月"/>-
							<input class="birthday-input" type="text" v-model="day" placeholder="日"/>
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form" style="width: 100%;">
							<div class="form-label">
								证件号码：
							</div>
							<input type="text" v-model="id_card" style="width:70%;margin-left: 0.625rem;" class="form-input-v" placeholder="请输入证件编号" />
						</div>
					</div>
				</div>
				<div class="carbme-div">
					<div class="carbme-title">
						点击相机图标，拍照身份证，自动识别身份证信息。
					</div>
					<div class="image-div-carbme">
						<img src="__IMG__/Union.png" >
					</div>
				</div>
				<div class="carbme-div">
					<div class="carbme-title">
						如遇护照，身份证无法上传，可手动输入。
					</div>
					<div class="image-div-carbme image2-div-carbme">
						<img src="__IMG__/Union1.png" >
					</div>
				</div>
			</template>
			<template v-if="tab_id == 1">
				<div class="page-title">
					电子行程
				</div>
				<div class="tab-id-1-title">
					基本信息
				</div>
				<div class="form">
					<div class="form-div">
						<div class="form-label">
							导游姓名：
						</div>
						<input type="text" class="form-input" v-model="base_user_name" />
					</div>
					<div class="form-div">
						<div class="form-label">
							导游电话：
						</div>
						<input type="text" class="form-input" v-model="base_user_mobile" />
					</div>
					<div class="form-div">
						<div class="form-label">
							出发日期：
						</div>
						<input type="text" class="form-input" v-model="base_star_date" />
					</div>
				</div>
				<div class="tab-id-1-title" style="margin-top: 1.5625rem ;">
					车辆信息
				</div>
				<div class="form">
					<div class="form-div">
						<div class="form-label">
							车牌号：
						</div>
						<input type="text" class="form-input" v-model="driver_car_id" />
					</div>
					<div class="form-div">
						<div class="form-label">
							司机姓名：
						</div>
						<input type="text" class="form-input" v-model="driver_user_name" />
					</div>
					<div class="form-div">
						<div class="form-label">
							司机电话：
						</div>
						<input type="text" class="form-input" v-model="driver_user_mobile" />
					</div>
				</div>	
			</template>
			<template v-if="tab_id == 3">
				<div class="page-title">
					人数统计
				</div>
				<div class="form">
					<div class="form-div">
						<div class="form-label">
							60岁以上：
						</div>
						<input type="text" class="form-input" v-model="number_80" />
					</div>
					<div class="form-div">
						<div class="form-label">
							18岁以下：
						</div>
						<input type="text" class="form-input" v-model="number_18" />
					</div>
					<div class="form-div">
						<div class="form-label">
							总人数：
						</div>
						<input type="text" class="form-input" v-model="all_number" />
					</div>
				</div>
			</template>
			<div class="v-d-b-next" @click="postForm">
				下一步
			</div>
		</div>
	</body>
</html>
<script>
// 'updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline','onMenuShareAppMessage',
// 		'onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','startRecord','stopRecord','onVoiceRecordEnd','playVoice',
// 		'pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage',
// 		'translateVoice','getNetworkType','openLocation'',getLocation','hideOptionMenu',
// 		'showOptionMenu','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem',
// 		'closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard'
	let js_sdk_list = ["chooseImage","uploadImage","previewImage"]
new Vue({
	el:"#visitor",
	data(){
		return{
			tab_id:1,
			id_card:"",
			family_id:"",
			user_name:"",
			minDate:new Date(1800,1,1),
			minDate:new Date(2100,1,1),
			currentDate:"",
			year:"",
			mouth:"",
			day:"",
			base_user_name:"",
			base_user_mobile:"",
			base_star_date:'',
			driver_car_id:"",
			driver_user_name:"",
			driver_user_mobile:"",
			number_80:0,
			number_18:0,
			all_number:0
		}
	},
	computed:{
		birthday(){
			return `${this.year}-${this.mouth}-${this.day}`
		}
	},
	created() {
			console.log(wx.config)
			//第一步填写下方参数
			wx.config({
				debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: '', // 必填，公众号的唯一标识
				timestamp: "", // 必填，生成签名的时间戳
				nonceStr: '', // 必填，生成签名的随机串
				signature: '', // 必填，签名
				jsApiList: js_sdk_list // 必填，需要使用的JS接口列表
			});
			wx.ready(function() {
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
			});		
	},

	methods: {
		//上传图片接口
		uploadImage() {
			wx.uploadImage({
				localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function(res) {
					var serverId = res.serverId; // 返回图片的服务器端ID
				}
			});
		},
		//选择图片,可以指定来源是相册还是相机，默认二者都有
		chooseImage() {
			wx.chooseImage({
				count: 1, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
					console.log(res)
				},
				fail:function(e){
					console.log(e)
				}
			});
		},
		//获取本地图片接口
		getLocationImage() {
			wx.getLocalImgData({
				localId: '', // 图片的localID
				success: function(res) {
					var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
				}
			});
		},

		changeTab(id){
			this.tab_id = id
			console.log(this.birthday)
		},
		postForm:function(){
                 var url = "visitorpost";
                 var _this = this;
                 console.log(_this.base_user_name);
                 axios.post(url,{name:_this.base_user_name,iphone:_this.base_user_mobile,base_star_date:_this.base_star_date,car_id:_this.driver_car_id,user_name:_this.driver_user_name,user_mobile:_this.driver_user_mobile}).then(function(res) {
                    var resData = res.data;
                    if(resData.status == "200") { //0表示成功，1表示失败    
                         console.log('提交成功');
                    }else{
                         console.log('提交失败');
                         alert(resData.msg);
                    } 
            });
		}
	}
})
</script>
